<template>
  <div class="roleSelect">
    <div class="guide">
      <p>请选择你的身份角色</p>
      <p class="explain">（我们会为你提供个性化计划定制清单）</p>
    </div>

    <div v-if="!isCustomCreate">
      <ul class="role">
        <li v-for="(item) in roleList" 
          :class="userRoles?.includes(item.roleCode) ? 'exitRole' : '' "
          :key="item.roleCode" 
          @click="userRoles?.includes(item.roleCode)  ? '' : roleSelect(item.roleCode)">
          {{item.roleName}} 
        </li>

        <li @click="addCustomRole">
          其他(没有预设模板，可自由发挥)
        </li>
      </ul>
    </div>

    <div class="customRole" v-if="isCustomCreate">
      请输入角色名称：<input v-model="customRoleName" type="text">
      <div class="handleBtn">
        <div class="btn" @click="goBackCreateRole">返回</div>
        <div class="btn" @click="createCustomRole" >创建</div>
      </div>
    </div>


    <div class="speak">
      <div class="box">
        Hello，你终于来啦！
        <br>快来随我一起开始吧！
      </div>
      <div>
        <img class="bear" :src="bear2" alt="">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref,onMounted} from 'vue'
import bear2 from '@/assets/imgs/bear2.png'
import {  
  searchRoleListApi,  
  bindRoleApi,
  addRoleMessageApi
} from '@/api/handleUserAccount.js'
import {useUserStore} from '@/store/user.js'


const store = useUserStore()
const roleList = ref()
const router = useRouter()
const userRoles = ref()
const customRoleName = ref()
const isCustomCreate = ref(false)

const goHome=()=>{
    router.replace('/home')
}

const roleSelect= async (id)=>{
  // 将当前选择的角色与用户绑定
  let bindResult = await bindRoleApi({roleCode:id})

  if(bindResult){
    goHome()
  }
}

const addCustomRole = ()=>{
  isCustomCreate.value = true
}

const goBackCreateRole = ()=>{
  isCustomCreate.value = false
}

const createCustomRole = async()=>{
  if(customRoleName.value){
    let res = await addRoleMessageApi({roleName:customRoleName.value})
    if(res){
      goHome()
    }

  }else{
    alert('请输入信息')
  }

}

onMounted( async ()=>{
  userRoles.value = store?.getUserInfo()?.roles?.map(item=>item.roleCode)
  let result = await searchRoleListApi()
  roleList.value = result ? result.reverse() : []

})


</script>

<style lang="less" scoped>

.roleSelect {
  padding: 15px;
  display: flow-root; //区块格式化上下文
  position: relative;
  box-sizing: border-box;
  min-height:calc(100vh - 30px);
  height: 100%;
  .guide{
    .explain{
      font-size: 13px;
    }
  }

  .role{

    .exitRole{
      position: relative;
      &::before{
        content: '';
        display: inline-block;
        color:skyblue;
        font-weight: bold;
        border-top:solid #708775 20px;
        border-left:solid #708775 20px;
        border-right:solid transparent 20px;
        border-bottom:solid transparent 20px;
        position: absolute;
        top:0;
        left: 0;
      }
    }

    @media (max-width:600px) {
       display: grid;
       grid-template-columns: repeat(auto-fill,minmax(90px,1fr));
    }

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;

    li{
      flex: 1  1 20%;
      display: flex;
      height: 100px;
      padding:5px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border:solid black  2px;
    }
  }
  

  .customRole{
    margin-top: 40px;

    input{
        background-color: rgba(255, 255, 255,0.68);
        border: none;
        border-radius: 5px;
        outline: none;
        padding: 2px 5px;
    }

    .handleBtn{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap:10px;
        margin-top: 20px;

        .btn{
          display: inline-block;
          background-color: #708775;
          color: white;
          font-weight: bold;
          border-radius: 15px;
          padding: 5px;
          font-size: 13px;
          width: 50%;
          max-width: 100px;

          &:nth-child(1){
              background-color: #8fa794;
          }
        }
        }
  }

  .speak{
    padding: 0 20px;
    margin-top: 60px;
    text-align: right;

    .box{
      background-image:url('@/assets/imgs/speakBox2.png');
      background-size:contain ;
      background-repeat: no-repeat;
      background-position: right;
      padding: 20px 22px;
    }
    .bear{
      width: 100px;
    }
  }
}


</style>
